{{extend './layout.htm'}}

{{block 'css'}}
<link href="/static/common/highlight/default.min.css" rel="stylesheet">
<link href="/static/admin/meedit.css" rel="stylesheet">
<style>
    .layui-tab-content {padding: 10px 0 0;}
    .input-thumb-block {display: flex;}
    .input-thumb {background-size: auto 100%; background-repeat: no-repeat; text-indent: 45px;}
    .select-thumb {margin-left: 10px;}
</style>
{{/block}}

{{block 'main'}}
<form method="post" action="{{url('save')}}" class="layui-form">
    <input type="hidden" name="id" value="{{article.id}}">
    <input type="hidden" name="user_id" value="{{article.user_id || user.id}}">
    <div class="layui-tab" lay-filter="demo">
        <ul class="layui-tab-title">
            <li class="layui-this">文章信息</li>
            <li>内容/预览</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">所属栏目</label>
                    <div class="layui-input-block">
                        <select name="cate_id" lay-verify="required">
                            {{each cate_list item}}
                            <option value="{{item.id}}" {{(item.id == article.cate_id) && 'selected'}}>{{item.cate_name}}</option>{{/each}}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" lay-verify="required" lay-verType="tips" class="layui-input" value="{{article.title}}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">作者</label>
                    <div class="layui-input-block">
                        <input type="text" name="writer" class="layui-input" value="{{article.writer || uname}}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">来源</label>
                    <div class="layui-input-block">
                        <input type="text" name="source" class="layui-input" value="{{article.source || site.webname}}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">来源链接</label>
                    <div class="layui-input-block">
                        <input type="text" name="source_url" class="layui-input" value="{{article.source_url}}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-block">
                        <input type="text" name="keywords" class="layui-input" value="{{article.keywords}}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <textarea name="description" placeholder="请输入内容" class="layui-textarea">{{article.description}}</textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">缩略图</label>
                    <div class="layui-input-block input-thumb-block">
                        <input type="text" name="thumb" class="layui-input input-thumb" value="{{article.thumb}}" autocomplete="off"><span class="layui-btn select-thumb">选择</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">开放评论</label>
                    <div class="layui-input-block">
                        <select name="comment_set" lay-verify="required">
                            {{each comment_set_options item}}
                            <option value="{{item.value}}" {{(item.value == article.comment_set) && 'selected'}}>{{item.name}}</option>{{/each}}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">是否页面</label>
                    <div class="layui-input-block">
                        <select name="is_page"  >
                            {{each is_page_options item}}
                            <option value="{{item.value}}" {{(item.value == article.is_page) && 'selected'}}>{{item.name}}</option>{{/each}}
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">点击</label>
                    <div class="layui-input-block">
                        <input type="text" name="click" class="layui-input" value="{{article.click || 0}}">
                    </div>
                </div>
            </div>
            <div class="layui-tab-item article">
                <textarea class="layui-textarea content" name="content" placeholder="请输入内容">{{@article.content || ''}}</textarea>
            </div>
        </div>
    </div>
    <div style="text-align: center;">
        <button class="layui-btn" lay-submit>提交</button>
    </div>
</form>
{{/block}}

{{block 'js'}}
<script src="/static/common/highlight/highlight.min.js"></script>
<script src="/static/admin/markdown-it/markdown-it.min.js"></script>
<script src="/static/admin/meedit.js"></script>
<script>
    layui.use(['form', 'element'], function() {
        var form = layui.form
        ,element = layui.element;

        // 初始化高度
        $('.article').height($(window).height() - $('header').height() - $('.layui-tab-title').height() - 30 - 60);

        // 缩略图选择
        $(".select-thumb").click(function() {
            layer.open({
                type: 2,
                title: '选择缩略图',
                shadeClose: true,
                shade: 0.2,
                area: ['360px', '455px'],
                content: "{{url('upload/index', {'callback': 'callback'})}}"
            });
        });
        // 选择回调
        window.callback = function(image) {
            layer.closeAll();
            typeof(image) == 'object' && (image = image.thumb);
            $("input[name=thumb]").val(image).change();
        }
        // 缩略图预览
        $("input[name=thumb]").on('change', function() {
            this.value && $(this).css('backgroundImage', 'url('+this.value+')');
        }).change();

        // 编辑器
        $('.content').meedit({
            upload_index: "{{url('upload/index', {'callback': 'upload_callback'})}}",
            upload_upload: "{{url('upload/upload')}}",
            onupload: function(image) {
                if(image && image.thumb && !$("input[name=thumb]").val()) {
                    $("input[name=thumb]").val(image.thumb).change();
                }
            },
            onrender: function() {
                $('.meview-title').text($('input[name=title]').val() || '内容预览');
            }
        });
    });
</script>
{{/block}}